<script setup>
import router from '@/router';
import { ElMessage } from 'element-plus';
import useStore from '@/stores';
import { LoginAsync } from '@/api/user';
const { userStore } = useStore()
const { setToken, setUserInfo } = userStore

const formRef = ref(null)
const formRules = ref({
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: "blur" }
  ]
})

const loginForm = ref({
  userName: 'admin',
  password: '123',
})
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const params = {
          userName: loginForm.value.userName,
          password: loginForm.value.password
        }
        const res = await LoginAsync(params)

        if (res && res.code + '' === '200') {
          setToken(res.data.token)
          setUserInfo(res.data.userInfo)
          ElMessage.success('登录成功！')
          router.push('/')
        }

        console.log('%c [  ]-33', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.log('%c [ error ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', error)

      }
    }
  })
}
</script>


<template>
  <h3>登录界面</h3>
  <el-form :label-position="right" :model="loginForm" ref="formRef" :rules="formRules">
    <!-- 账号 -->
    <el-form-item prop="userName">
      <el-input v-model="loginForm.userName" clearable>
        <template #prefix>
          <el-icon>
            <User />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password">
      <el-input :prefix-icon="Lock" v-model="loginForm.password" clearable show-password>
        <template #prefix>
          <el-icon>
            <Lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</template>



<style lang="scss" scoped>
h3 {
  margin-bottom: 20px;
  -webkit-text-stroke: 1px rgb(215, 215, 215);
  -moz-text-stroke: 1px rgb(215, 215, 215);
  -o-text-stroke: 1px rgb(215, 215, 215);
  font-size: 36px;
  font-style: italic;
  letter-spacing: 5px;

  ::after {
    content: " ";
    height: 100%;
    width: 20px;

  }
}

.login-btn {
  color: #fff;
  width: 100%;
  border: #696d62;
  background-color: #363636;

  &:hover {
    background-color: #696d62;
  }
}
</style>